<template>
	<view class="wrap">
		<image src="../../../../../static/uview/common/z_big-img.png" mode="widthFix" style="width: 100%;"></image>
		<h3>选择你想要的风格：</h3>
		<u-form :model="form" ref="uForm" label-width="130">
			<u-form-item label=" " label-width="0" prop='ishas'>
				<u-radio-group v-model="form.ishas">
					<u-radio name="0">
						中式葬礼
					</u-radio>
					<u-radio name="1">
						西式葬礼
					</u-radio>
					<u-radio name="2">
						个性葬礼
					</u-radio>
					<u-radio name="3">
						宗教法师
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="姓名" prop='name'>
				<u-input v-model="form.name" placeholder="请输入姓名..."/>
			</u-form-item>
			<u-form-item label="电话" prop='pho'>
				<u-input v-model="form.pho"  placeholder="请输入电话..."/>
			</u-form-item>
		</u-form>
		<view class="subBtn">
			<button type="primary" size="mini" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				rules:{
					name:[{
						type:"string",
						require:true,
						message:'请重新填写名称'
					}],
					ishas:[{
						require:true,
						message:'请选择想要的风格'
					}],
					pho:[{
						required: true, 
						message: '请输入手机号',
						trigger: ['change','blur'],
					},{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}],
				},
				form:{
					name:'',
					relation:'',
					ishas:''
				}
			}
		},
		methods: {
			// 跳转 个人中心页面
			submit(){
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
				uni.switchTab({
					url: '/pages/view/center/center'
				})
			}
		}
	}
</script>

<style scoped>
.wrap{
	padding:0 30upx;
}
h3{
	font-weight: bold;
	color: #111;
	margin:30upx 0;
	font-size: 36upx;
}
/deep/ .u-radio{
	float: none!important;
	display: flex!important;
	margin:30upx 0;
}
.subBtn {
		text-align: center;
		margin: 50upx auto;
	}

	.indeco {
		color: rgb(127, 77, 18);
	}

	.taca {
		padding: 15upx;
	}
</style>
